<template>
  <div class="container" v-if="showPage">
    <adminMenuVue :isOpen="isOpen" :menus="menuList"></adminMenuVue>
    <div class="main">
      <div class="bread-menu">
        <div style="display: flex">
          <div
            class="cursor-common"
            style="margin-right: 20px; display: flex; align-items: center"
            @click="open"
          >
            <el-icon size="20"><Fold /></el-icon>
          </div>
          <div
            class="cursor-common"
            style="margin-right: 20px; display: flex; align-items: center"
          >
            <router-link to="/"
              ><el-icon size="20" color="#fff"><HomeFilled /></el-icon
            ></router-link>
          </div>
          <div class="cursor-common" style="display: flex; align-items: center">
            <el-icon size="20" color="#fff"><Refresh /></el-icon>
          </div>
        </div>
        <div>
          <el-dropdown>
            <span>
              <el-avatar :src="userInfo?.avatar"> error </el-avatar>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Promotion" @click="logout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div style="margin-top: 60px; width: 100%">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
  <page-loading-vue v-else></page-loading-vue>
</template>

<script setup>
import request from "@/assets/js/request";
import adminMenuVue from "@/components/admin-menu.vue";
import { HomeFilled, Fold, Refresh, Promotion } from "@element-plus/icons-vue";
import pageLoadingVue from "@/components/other/page-loading.vue";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const isOpen = ref(false);
const userInfo = ref({});

const menuList = ref([]);
const router = useRouter();
const showPage = ref(false);

const getMenu = () => {
  request
    .get("/role/menu")
    .then((res) => {
      if (res.code === 200) {
        menuList.value = res.data;
        showPage.value = true;
      } else if (res.code === 401) {
        ElMessage.error(res.msg);
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
      localStorage.clear();
      router.push("/alogin");
    });
};

const open = () => {
  isOpen.value = !isOpen.value;
};

const logout = () => {
  localStorage.clear();
  router.push("/alogin");
};

onMounted(() => {
  getMenu();
  let u = localStorage.getItem("user");
  if (u !== null) {
    userInfo.value = JSON.parse(u);
    console.log(userInfo.value);
  }
});
</script>

<style scoped lang="scss">
.container {
  display: flex;
  box-sizing: border-box;
  background: #fff;
  .main {
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    height: calc(100vh);
  }
  .bread-menu {
    font-size: 16px;
    display: flex;
    position: fixed;
    width: calc(100% - 200px);
    top: 0;
    z-index: 999;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 10px 30px;
    align-items: center;
    background: #545c64;
    color: #fff;
  }
}
</style>
